<template>
	<!-- <view>
		
		<iframe :src="url" height='100%' width='100%'></iframe>
	    <web-view :src="url" :progress="false"></web-view>
	</view> -->
	<page  ref='page'>
		<!--  客户服务中心 -->
		<view class="tabber_box">
			<view class="tabber_box_static" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
		</view>
		<view class="tabber_box_title_static">
		</view>
		<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
			<view class="left" @click="onBack()">
				<n-icon name="back" size="40" color='#000'></n-icon>
			</view>
			<view class="text">
				客服中心
			</view>
		</view>
		<view class="img_box">
			<view class="top">
				<view class="shangz">
					<view class="shangz1">
						HI~，有什么可以帮您的！
					</view>
					<view class="shangz2">
						图装客户服务中心
					</view>
				</view>
				<view class="xiaz" @click="onChatphone(telephone)">
					<image class="img" :src="tupian2"  mode="scaleToFill" ></image>
					<view class="xiaz1">
						售后热线
					</view>
					
				</view>
			</view>
			<view class="text">
				<image class="img" :src="tupian"  mode="scaleToFill" ></image>
			</view>
		</view>
		<view class="info_list">
			<view class="row"  >
				<text class="left cjwenti">常见问题</text>
			</view>
			<view class="" v-for='(item,ib) in customerlist' :key='ib'  @click="gocustdetail(item)">
				<view class="row"   >
					<text class="left">{{item.name}}</text>
					<view class="right">
						<n-icon name="right" size="28" color='#999' ></n-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box">
			<!-- <button class="btn1" @click="onChatphone(telephone)">售后热线</button> -->
			<!-- <button class="btn2"  open-type="contact" >在线客服</button> -->
		</view>
		
	</page>
</template>

<script>
	import { getcustomerservice } from './static/api.js'
	import uParse from '@/components/u-parse/u-parse.vue'
	import {
		getUserInfo
	} from '@/utils/getRequest.js'
	export default {
		components:{uParse},
		data() {
			return {
				telephone:0,
				tupian:require('../static/image/icon/kefuzhongxin.png'),
				tupian2:require('../static/image/icon/dianhua.png'),
				customerlist:[],
				juese: '',
				juesetype: 0,
				personalInfo: {
					avatar: '',
					name: '',
				},
				loading: false,
				info:{
					rule:"",
					name:"规则说明",
				},
			}
		},
		
		methods: {
			gocustdetail(e){
				console.log(e,'问题详情');
				uni.setStorageSync('customerservicename',e.name);
				uni.setStorageSync('customerservicecon',e.content);
				uni.navigateTo({
					url: `/pagesChat/customerServicedetail`
				})
			},
			onChatphone(phone){
				// #ifdef APP-PLUS
				
				
				plus.android.requestPermissions(
					["android.permission.CALL_PHONE"], 
					function(resultObj) {
						var result = 0;
						for (var i = 0; i < resultObj.granted.length; i++) {
							var grantedPermission = resultObj.granted[i];
							console.log('已获取的权限：' + grantedPermission);
							result = 1
						}
						for (var i = 0; i < resultObj.deniedPresent.length; i++) {
							var deniedPresentPermission = resultObj.deniedPresent[i];
							console.log('拒绝本次申请的权限：' + deniedPresentPermission);
							result = 0
						}
						for (var i = 0; i < resultObj.deniedAlways.length; i++) {
							var deniedAlwaysPermission = resultObj.deniedAlways[i];
							console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
							result = -1
						}
						console.log(result);
						if(result == 1){
							uni.makePhoneCall({
								 phoneNumber: phone.toString(),//电话号码
								success(ress) {
									console.log("拨打电话成功",ress)
								},
								fail(err) {
									console.log("拨打电话失败",'err')
								}
							});
						}else{
							uni.showToast({
								title:"请开启拨号权限",
								icon:"error",
							})
						}
					},
					function(error) {
						console.log('申请权限错误：' + error.code + " = " + error.message);
					}
				);
				// #endif
				// #ifdef MP-WEIXIN
				uni.makePhoneCall({
					phoneNumber:phone.toString(),//电话号码
					success:function(e){
						console.log(e,'成功');
					},
					fail:function(e){
						console.log(e,'失败');
				 
					}
				})
				// #endif
			},
			onBack() {
				uni.navigateBack()
			},
			async getInfoUser(type) {
				try {
					var result = await getcustomerservice({
						user_id:this.personalInfo.id,
						zone_id:this.personalInfo.zone_id});
					this.customerlist = result.customerservice;
					this.telephone = result.telephone;
					console.log(result,'客户中心')
				} catch (err) {
				}
			}
		},
		onLoad(params) {
			
			this.personalInfo = Object.assign({},this.$store.state.userInfo)
			console.log(this.personalInfo,'用户信息')
			this.getInfoUser()
		},
	}
	
    // export default {
    //     data() {
    //         return {
    //             url:''
    //         };
    //     },
    //     onLoad(val) {
    //         this.url = this.$global.imgUrl + '/chatlink.html'
    //     },
    // }
</script>

<style lang="scss" scoped>
	.tabber_box .tabber_box_static {
		width: 100%;
		background-color: #36353a;
	}
	
	.tabber_box .tabber_box_flex {
		width: 100%;
		background-color: #36353a;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	
	.tabber_box_title_static {
		height: 80rpx;
		width: 100%;
		background-color: #fff;
	}
	
	.tabber_box_title_flex {
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		text-align: center;
		color: #000000;
	
		.left {
			margin-top: 4rpx;
			position: absolute;
			left: 40rpx;
			top: 50%;
			transform: translateY(-50%);
	
		}
	}
	
	.img_box {
		// position: relative;
		//     bottom: 30px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-bottom: 52rpx;
		// background-color: #ffa459;
		.top {
			// position: relative;
			// margin-bottom: 28rpx;
			z-index: 100;
			flex: 0 0 62%;
			padding: 30px 0px 0px 28px;
			.shangz{
				
				.shangz1{
					font-size: 18px;
					font-weight: 600;
					margin-bottom: 5px;
				}
				.shangz2{
					font-size: 14px;
					color:#656565;
				}
			}
			.xiaz{
				display: flex;
				    align-items: center;
				    justify-content: flex-start;
				    margin-top: 30px;
				.img{
					width: 22px;
					height:22px;
				}
				.xiaz1{
					display: inline-block;
					margin-left: 10px;
					color:#ff9b03;
					font-size: 14px;
				}
			}
		}
	
		.img {
			// filter: opacity(20%);
			width: 180rpx;
			height: 180rpx;
			// border-radius: 50%;
		}
	
		.icon {
			// position: absolute;
			right: 20rpx;
			// bottom: 0;
			width: 42rpx;
			height: 42rpx;
		}
	
		.text {
			// letter-spacing: 5px;
			// color: #fff;
			// line-height: 40rpx;
			// z-index: 101;
			// font-size: 48rpx;
			flex: auto;
			margin-top: auto;
			    // position: absolute;
			
			.img{
				width: 137rpx;
				height: 169rpx;
			}
		}
	}
	
	.info_list {
		box-sizing: border-box;
		box-shadow: 0px 0px 10px 0px #cacaca;
		
		.cjwenti{
			font-weight: 700;
		}
	}
	
	.row {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		line-height: 80rpx;
		color: #26252B;
		// margin-bottom: 60rpx;
		width: 100%;
		border-bottom: 1rpx solid #e8e8e8;
		.left{
			font-size: 28rpx;
			padding-left: 40rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	
		.right {
			font-size: 28rpx;
			text-align: right;
			width: calc(100% - 20em);
			padding-right: 40rpx;
			.input {
				width: 100%;
				text-align: right;
				color: #ADADAD;
			}
		}
	}
	
	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		font-size: 32rpx;
		button[loading]::before {
			align-self: center
		}
		button {
			display: flex;
			justify-content: center;
			align-item: center;
			padding: 0;
			border-radius: 0;
		}
	
		button::after {
			border: none;
		}
	
		.btn2 {
			width: 50%;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: #fe7a1f;
			color: #fff;
			font-size: 28rpx;
			margin: 10px 10px 10px 5px;
			border: 1px solid #fe7a1f;
		}
	
		.btn1 {
			width: 94%;
			height: 72rpx;
			background: #e8e8e8;
			line-height: 72rpx;
			text-align: center;
			color: #000;
			font-size: 28rpx;
			margin: 10px 5px 10px 10px;
			border: 1px solid #ccc;
		}
	
	}
</style>

